<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A box full of Freedom.">
    <meta name="author" content="">
    <link rel="shortcut icon" href="./gnu.ico">
    <title>Freedombox</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >
    <link rel="stylesheet" href="./assets/vender/intl-tel-input/css/intlTelInput.css">
    <!-- EXTRACT ADDITIONAL STYLING HERE =======> -->
    <style>
      .container {
        width: auto;
        max-width: 800px;
      }
      .form-group {
        margin-bottom: 8px;
      }
      #feedbackForm {
        font-size: 12px;
      }
    </style>
    <!-- <======= UP TO HERE -->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="assets/vender/bootstrap/assets/js/html5shiv.js"></script>
      <script src="assets/vender/bootstrap/assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- EXTRACT FORM HERE =======> -->
    <div class="container">
      <div class="page-header">
        <img src="./freedombox_logo.png" alt="freedombox" />
      </div>
      <p class="lead">This box is totally driven by <a href="https://www.gnu.org/philosophy/free-sw.html" target="_blank">Free Software</a>.</p>
      <p>It's under personal control and makes use of high security standards in order to protect the owners privacy and rights. It's meant to be used as hosting platform for Free Software and Free Content.</p>
      <p>If you are interested in setting up something like this on your own, please take a look at <a href="https://wiki.debian.org/FreedomBox" target="_blank">Freedombox</a> notes in the Debian wiki.</p>
    </div>
    <div class="container">
      <h3>Our Projects</h3>
      <div class="row">

        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <a href="https://freie.software" target="_blank"><img src="./thumbs/Photobook.png" alt="Photobook"></a>
              <div class="caption">
                <h4>Free Software Photobook</h4>
                <p>We create a photobook, where we showcase people using Free Software (German).</p>
                <p><a href="https://freie.software" class="btn btn-primary btn-xs" role="button" target="_blank">Visit the Photobook</a></p>
              </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <a href="https://gnusocial.ch" target="_blank"><img src="./thumbs/GNUsocial.png" alt="GNU social"></a>
              <div class="caption">
                <h4>GNU Social</h4>
                <p>We host our own instance of GNU social for the German speaking part of Switzerland</p>
                <p><a href="https://gnusocial.ch" class="btn btn-primary btn-xs" role="button" target="_blank">Visit GNU social</a></p>
              </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <a href="http://www.freiesmagazin.de/mobil/freiesMagazin-2015-03-bilder.html#fm_15_03_privacy_guide" target="_blank"><img src="./thumbs/privacyguide.png" alt="Privacy Guide"></a>
              <div class="caption">
                <h4>Privacy Guide</h4>
                <p>Our Privacy Guide will help you to prevent your privacy in the internet (German).</p>
                <p><a href="http://www.freiesmagazin.de/mobil/freiesMagazin-2015-03-bilder.html#fm_15_03_privacy_guide" class="btn btn-primary btn-xs" role="button" target="_blank">Privacy Guide</a></p>
              </div>
          </div>
        </div>

      </div>
    </div>

    <div class="container">
      <h4>Get in touch with us&hellip;</h4>
      <div id="contact_form" class="row">
        <div class="col-12 col-sm-12 col-lg-12">
          <p>If you have a comment, compliment or complaint, please fill in the below form and we will get back to you.</p>
          <form role="form" id="feedbackForm">
            <div class="form-group has-feedback">
              <label class="control-label" for="name">Name</label>
              <input type="text" class="form-control input-sm" id="name" name="name" placeholder="Enter your name" />
              <span class="help-block" style="display: none;">Please enter your name.</span>
            </div>
            <!-- UNCOMMENT HERE IF YOU WANT TITLE, COMPANY WEBSITE AND PHONE FIELDS - you must also uncomment values in $fields_req in sendmail.php
            <div class="form-group">
              <label class="control-label" for="title">Title</label>
              <input type="text" class="form-control input-sm optional" id="title" name="title" />
            </div>
            <div class="form-group">
              <label class="control-label" for="company">Company</label>
              <input type="text" class="form-control input-sm optional" id="company" name="company" />
            </div>
            <div class="form-group">
              <label class="control-label" for="website">Website</label>
              <input type="url" class="form-control input-sm optional" id="website" name="website" />
            </div>
            <div class="form-group has-feedback">
              <label class="control-label" for="phone">Phone</label>
              <input type="tel" class="form-control input-sm optional" id="phone" name="phone" placeholder="Enter your phone (Optional)"/>
              <span class="help-block" style="display: none;">Please enter a valid phone number.</span>
            </div>
            -->
            <div class="form-group has-feedback">
              <label class="control-label" for="email">Email Address</label>
              <input type="email" class="form-control input-sm" id="email" name="email" placeholder="Enter your email" />
              <span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
            </div>
            <div class="form-group has-feedback">
              <label class="control-label" for="message">Message*</label>
              <textarea rows="5" cols="30" class="form-control input-sm" id="message" name="message" placeholder="Enter your message" ></textarea>
              <span class="help-block" style="display: none;">Please enter a message.</span>
            </div>
            <img id="captcha" src="./library/vender/securimage/securimage_show.php" alt="CAPTCHA Image" />
            <a href="#" onclick="document.getElementById('captcha').src = './library/vender/securimage/securimage_show.php?' + Math.random(); return false" class="btn btn-info btn-sm">Show a Different Image</a><br/>
            <div class="form-group has-feedback" style="margin-top: 10px;">
              <label class="control-label" for="captcha_code">Text Within Image</label>
              <input type="text" class="form-control input-sm" name="captcha_code" id="captcha_code" placeholder="For security, please enter the code displayed in the box." />
              <span class="help-block" style="display: none;">Please enter the code displayed within the image.</span>
            </div>
            <span class="help-block" style="display: none;">Please enter a the security code.</span>
            <button type="submit" id="feedbackSubmit" class="btn btn-primary btn-sm" data-loading-text="Sending..." style="display: block; margin-top: 10px;">Send Feedback</button>
          </form>
        </div><!--/span-->
      </div><!--/row-->
      <hr>
    </div><!--/.container-->
    <!-- <======= UP TO HERE -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="assets/vender/intl-tel-input/js/intlTelInput.min.js"></script>
    <script src="assets/js/contact-form.js"></script>
  </body>
</html>
